<template>
<div v-if="data">
    <!-- start 加载 -->
    <div :class="load ? 'is_load' : ''">
        <van-loading type="spinner" v-if="load" color="#1989fa">
            <span style="color: #1989fa">加载中...</span>
        </van-loading>
    </div>
    <!-- End 加载 -->
    <div class="index-wrap" v-if="type == 0">
        <div  :class="size=='classify' ? 'classify shadow' : 'goods-wrap shadow'  " v-for="(item,index) in data" :key="index" @click="$emit('getDetails',item,type)">
            <div v-lazy:background-image="item.avatar" class="avatar"></div>
            <div class="info">
                <p class="title">{{ item.title }}</p>
                <p class="price"> {{ item.price | money }} <span style="font-size: 10px;color: #666">0 人付款</span> </p>
            </div>
        </div>
    </div>
    <div class="index-wrap" v-else-if="type == 2">
        <div :class="size=='classify' ? 'classify shadow' : 'goods-wrap shadow'  " v-for="(item,index) in data" :key="index" @click="$emit('getDetail',item,type)">
            <div v-lazy:background-image="item.avatar" class="avatar">
            </div>
            <div class="info">
                <p class="title">{{ item.title }}</p>
                <p class="integral">{{ item.integral | integral }} <span style="font-size: 10px;color: #666">0 人付款</span> </p>
            </div>
        </div>
    </div>
    <div class="index-wrap" v-else>
        <div :class="size=='classify' ? 'classify shadow' : 'goods-wrap shadow'  " v-for="(item,index) in data" :key="index" @click="$emit('getDetail',item,type)">
            <div v-lazy:background-image="item.avatar" class="avatar">
            </div>
            <div class="info">
                <p class="title">{{ item.title }}</p>
                <p class="price">{{ item.price | money }} <span style="font-size: 10px;color: #666">0 人付款</span> </p>
            </div>
        </div>
    </div>
    <template v-if="data.length == 0">
      <div class="goods-null">
        暂无商品
      </div>
    </template>
</div>
</template>

<script>
/**
 * @param {[type]} load [是否加载]
 * @param {[type]} data [商品数组]
 * @param {[type]} getDetail [父元素回调]
 */
export default {
    name: 'Index',
    props: {
        data: [Array, Object],
        type: [Number, String],
        load: [Boolean, String],
        HeightSize: [String],
        size: [String]
    },
    mounted() {

    },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style scoped>
.is_load,
.dataNull {
    text-align: center;
    line-height: 200px;
    height: 100%;
    width: 100%;
    color: white;
    background-color: rgba(170, 170, 170, 0.2);
    z-index: 10;
    margin-bottom: 10px;
}

.index-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 7px;
    grid-row-gap: 7px;
    transition: .3s;
}

.goods-wrap {
    display: grid;
    grid-template-rows: 174px 70px;
    background: white;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.goods-wrap .avatar {
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0 0 0;
}

.goods-wrap .info p {
    margin: .5rem;
}

.goods-wrap .info .title {
    box-sizing: border-box;
    box-sizing: border-box;
    height: 31px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    color: #232326;
    margin-top: 5px;
    line-height: 16px;
}

.goods-wrap .price {
    color: rgb(225, 37, 27)
}

@media screen and (min-width: 300px) and (max-width: 350px) {
    .goods-wrap {
        grid-template-rows: 10.679rem 5rem;
    }
    .classify {
        grid-template-rows: 7.965rem 5rem;
    }
}

@media screen and (min-width: 350px) and (max-width: 399px) {
    .goods-wrap {
        grid-template-rows: 12.642857142857142rem 5rem;
    }
    .classify {
        grid-template-rows: 9.928571428571429rem 5rem;
    }
}

@media screen and (min-width: 400px) and (max-width: 420px) {
    .goods-wrap {
        grid-template-rows: 14.25rem 5rem;
    }
    .classify {
        grid-template-rows: 11.322rem 5rem;
    }
}

.classify {
    display: grid;
    grid-template-rows: 174px 70px;
    background: white;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.classify .avatar {
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0 0 0;
}

.classify .info p {
    margin: .5rem;
}

.classify .info .title {
    box-sizing: border-box;
    box-sizing: border-box;
    height: 31px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    color: #232326;
    margin-top: 5px;
    line-height: 16px;
}

.classifyp .price {
    color: rgb(225, 37, 27)
}

.goods-null {
  background-color: white;
  text-align: center;
  padding:20px 0;
}

.integral {
  color: #ff8140
}

</style>
